<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>电影列表</el-breadcrumb-item>
      <el-breadcrumb-item to="/home/movie-list">新增电影</el-breadcrumb-item>
      <el-breadcrumb-item>修改电影</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
    <!-- 控制半个屏幕用栅格 -->
    <el-row>
      <el-col :span="12">
        <!-- 添加电影内容的表单 -->
        <el-form :rules="rules" ref="form" :model="form" label-width="80px">
          <el-form-item label="电影封面" prop="cover">
            <el-upload
              class="avatar-uploader"
              action="http://localhost:9000/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <el-image
                v-if="form.cover"
                fit="cover"
                :src="form.cover"
                class="avatar"
              ></el-image>
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <el-form :rules="rules" ref="form" :model="form" label-width="80px">
          <el-form-item label="电影类别" prop="category_id">
            <el-radio-group v-model="form.category_id">
              <el-radio :label="1">热映</el-radio>
              <el-radio :label="2">待映</el-radio>
              <el-radio :label="3">经典</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="电影名称" prop="title">
            <el-input v-model="form.title"></el-input>
          </el-form-item>
          <el-form-item label="电影类型" prop="type">
            <el-select
              v-model="form.type"
              multiple
              placeholder="请选择电影类型"
            >
              <el-option
                v-for="item in movieTypes"
                :key="item.id"
                :label="item.typename"
                :value="item.typename"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="电影主演" prop="star_actor">
            <el-select
              v-model="form.star_actor"
              multiple
              filterable
              remote
              reserve-keyword
              placeholder="请输入关键词"
              :remote-method="loadActorsByName"
              :loading="loadingActors"
            >
              <el-option
                v-for="item in actorList"
                :key="item.id"
                :label="item.actor_name"
                :value="item.actor_name"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="上映时间" prop="showingon">
            <el-date-picker
              value-format="yyyy-MM-dd"
              type="date"
              v-model="form.showingon"
              placeholder="选择日期"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="电影评分" prop="score">
            <el-input v-model="form.score"></el-input>
          </el-form-item>
          <el-form-item label="电影时长" prop="duration">
            <el-input v-model="form.duration"></el-input>
          </el-form-item>
          <el-form-item label="电影简介" prop="description">
            <el-input type="textarea" v-model="form.description"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit"
              >立即更新电影信息</el-button
            >
            <el-button @click="Cancel">取消</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loadingActors: false, // 绑定是否正在加载演员列表
      //绑定主演列表
      actorList: null,
      //获取所有电影类型
      movieTypes: null,
      form: {
        id: this.$route.params.id,
        showingon: "",
        cover: "",
        category_id: 1, //默认值 默认选中1
        title: "",
        type: "",
        star_actor: "",
        score: "",
        duration: "",
        description: "",
      },
      rules: {
        // 定义表单中每一个表单组件的验证规则
        cover: [{ required: true, message: "请选择封面图片", trigger: "blur" }],
        title: [{ required: true, message: "请填写标题", trigger: "blur" }],
        type: [{ required: true, message: "请填写电影类型", trigger: "blur" }],
        star_actor: [
          { required: true, message: "请填写主演", trigger: "blur" },
        ],
        showingon: [
          { required: true, message: "请选择上映时间", trigger: "blur" },
        ],
        score: [{ required: true, message: "请填写评分", trigger: "blur" }],
        duration: [
          { required: true, message: "请填写电影时长", trigger: "blur" },
        ],
        description: [
          { required: true, message: "请填写电影简介", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    //模糊查询电影主演演员
    loadActorsByName(query) {
      this.loadingActors = true;
      this.$http.ActorApi.search({ name: query }).then((res) => {
        console.log(res, "查询演员");
        if (res.data.code == 200) {
          this.actorList = res.data.data;
          this.loadingActors = false;
        }
      });
    },
    /**
     * 取消修改信息
     */
    Cancel() {
      this.$router.push("/home/movie-list");
    },
    /**
     * 修改电影信息
     */
    onSubmit() {
      //提交前将电影类型从数组转为字符串
      this.form.type = this.form.type.join("/");
      //提交前将电影主演从数组转为字符串
      this.form.star_actor = this.form.star_actor.join("/");
      this.$refs["form"].validate((valid) => {
        console.log("sumbit", this.form);
        if (valid) {
          this.$confirm("此操作将添加电影信息，是否继续", "提示", {
            confirmButtonText: "确认",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            this.$http.MovieApi.update(this.form).then((res) => {
              console.log(res, "修改电影成功");
              if (res.data.code == 200) {
                this.$message({
                  type: "success",
                  message: "更新成功",
                });
                this.$router.push("/home/movie-list");
              }
            });
          });
        } else {
          this.$message({
            type: "warning",
            message: "请完善表单！",
          });
        }
      });
    },
    handleAvatarSuccess(res, file) {
      console.log(res, "zheg shi");
      if (res.code === 200) {
        this.form.cover = res.data;
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg" || "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG或PNG格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    //加载所有电影类型
    loadAllMovieTypes() {
      this.$http.MovieApi.search().then((res) => {
        console.log(res, "搜索成功");
        if (res.data.code == 200) {
          this.movieTypes = res.data.data;
        }
      });
    },
    // 电影详细信息 回填表单
    loadMovieInfo() {
      this.$http.MovieApi.queryById({ id: this.form.id }).then((res) => {
        console.log(res, "加载电影信息");
        this.form = res.data.data;
        //重新整理 star——actor  movie——type为数组
        this.form.star_actor = this.form.star_actor.split("/");
        this.form.type = this.form.type.split("/");
      });
    },
  },
  created() {
    this.loadAllMovieTypes();
    console.log(this.form);
    //加载当前电影的详细信息  回填表单
    this.loadMovieInfo();
  },
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>
